<script setup lang="ts">
import { reactive, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Number, Boolean],
    default: () => null
  },
  activeColor: {
    type: String,
    default: () => '#13ce66'
  },
  inactiveColor: {
    type: String,
    default: () => '#E5EAF3'
  },
  activeText: {
    type: String,
    default: () => ''
  },
  inactiveText: {
    type: String,
    default: () => ''
  },
  activeValue: {
    type: [String, Number, Boolean],
    default: () => null
  },
  inactiveValue: {
    type: [String, Number, Boolean],
    default: () => null
  },
  disabled: {
    type: Boolean,
    default: () => false
  }
})

const emit = defineEmits(['update:modelValue'])

const state = reactive({
  inputValue: props.modelValue ? props.modelValue : true
})

const change = () => {
  emit('update:modelValue', state.inputValue)
}

watch(
  () => props.modelValue,
  (val: any) => {
    state.inputValue = val
  }
)
</script>

<template>
  <el-switch
    v-model="state.inputValue"
    inline-prompt
    :style="`--el-switch-on-color: ${props.activeColor}; --el-switch-off-color: ${props.inactiveColor}`"
    :active-text="props.activeText"
    :inactive-text="props.inactiveText"
    :active-value="props.activeValue"
    :inactive-value="props.inactiveValue"
    :disabled="props.disabled"
    @change="change"
  />
</template>

<style lang="scss" scoped></style>
